<template>
    <div>
        <my-nav-bar
            fixed
            title="时间，兄弟"
            left-text="返回"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        ></my-nav-bar>
        <h2 class="title" style="margin-top: 46px;">时间选择器</h2>
        <date-time style="border:1px solid #000;height: 50px;line-height: 50px;text-align: center;" v-model="datetime0"></date-time>

        <h2>
            <div class="time">Time：</div>
            <date-time type="time" v-model="datetime1" slot="right"></date-time>
        </h2>
        <h2>
            <div class="time">Day：</div>
            <date-time type="day" v-model="datetime2" slot="right"></date-time>
        </h2>
        <h2>
            <div class="time">Month：</div>
            <date-time type="month" v-model="datetime3" slot="right"></date-time>
        </h2>
        <h2>
            <div class="time">Date：</div>
            <date-time type="date" v-model="datetime4" slot="right"></date-time>
        </h2>
        <h2>
            <div class="time">DateTime：</div>
            <date-time type="datetime" v-model="datetime5" slot="right"></date-time>
        </h2>
        <h2>
            <div class="time">自定义：</div>
            <date-time v-model="datetime6" :yearFormat="yearFormat" :month-format="monthFormat" :day-format="dayFormat" type="date" slot="right"></date-time>
        </h2>

    </div>
</template>
<script>
export default {
  data() {
    return {
        datetime0: '',
        datetime1: '05:21',
        datetime2: '03-29',
        datetime3: '2016-06',
        datetime4: '2017-05-11',
        datetime5: '2017-05-11 06:06',
        datetime6: '2017-05-11',
        yearFormat: '<span style="color:#F00;">{value}<i style="font-size: 12px;margin-left: 1px;">年</i></span>',
        monthFormat: '<span style="color:#0BB20C;">{value}<i style="font-size: 12px;margin-left: 1px;">月</i></span>',
        dayFormat: '<span style="color:#FFB400;">{value}<i style="font-size: 12px;margin-left: 1px;">日</i></span>'
    };
  },
  methods: {
    onClickLeft() {
      this.$router.$go(-1);
    },

    onClickRight() {
      console.log("right");
    }
  }
};
</script>
<style lang="less" scoped>
h2{
    display: flex;
    justify-content: space-between;
    .time{
        flex-basis: 100px;
    }
}
</style>
